<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品介绍 - 蓝猫</title>
    <!-- 引入外部资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#007AFF', // 大疆蓝
                        secondary: '#00C2FF',
                        dark: '#111827',
                        'dark-light': '#1F2937',
                        'gray-custom': '#6B7280'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-md hover:bg-primary/90 transition-all hover:shadow-md;
            }
            .btn-secondary {
                @apply bg-secondary text-white px-4 py-2 rounded-md hover:bg-secondary/90 transition-all hover:shadow-md;
            }
            .category-active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .slide-in {
                animation: slideIn 0.6s ease-out forwards;
            }
            @keyframes slideIn {
                from { opacity: 0; transform: translateY(20px); }
                to { opacity: 1; transform: translateY(0); }
            }
        }
    </style>
</head>

<body class="bg-white text-dark font-sans">
    <!-- 导航栏 -->
    <header id="navbar" class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50 transition-all duration-300">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-20">
                <!-- Logo -->
                <a href="index.html" class="flex items-center space-x-2">
                    <span class="logo text-2xl font-bold text-blue-600">蓝猫</span>
                </a>

                <!-- 导航链接 - 桌面版 -->
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="index.html" class="font-medium hover:text-primary transition-colors">首页</a>
                    <a href="#" class="font-medium hover:text-primary transition-colors">热卖商品</a>
                    <a id="adminCreateProduct" href="add-product.html"
                        class="font-medium hover:text-primary transition-colors hidden">创建商品</a>
                    <a href="about-ours.html" class="font-medium hover:text-primary transition-colors">关于我们</a>
                </nav>

                <!-- 搜索框 - 桌面版 -->
                <div class="hidden md:flex items-center relative flex-1 max-w-md mx-8 group">
                    <input type="text" id="searchInput" placeholder="搜索商品..."
                        class="w-full py-2 px-4 pr-10 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all group-hover:border-primary/30">
                    <button id="searchBtn" class="absolute right-3 text-gray-400 hover:text-primary transition-colors">
                        <i class="fa fa-search"></i>
                    </button>
                </div>

                <!-- 用户功能区 -->
                <div class="flex items-center space-x-4">
                    <button id="cartBtn" class="relative p-2 hover:text-primary transition-colors">
                        <i class="fa fa-shopping-cart text-xl"></i>
                        <span id="cartCount"
                            class="absolute -top-1 -right-1 bg-secondary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center transition-all">0</span>
                    </button>

                    <div id="auth-links" class="flex items-center space-x-4">
                        <a href="login.html"
                            class="relative text-sm text-gray-500 hover:text-primary transition-colors">登陆</a>
                        <a href="register.html"
                            class="relative text-sm text-gray-500 hover:text-primary transition-colors">注册</a>
                    </div>

                    <div id="user-info" class="hidden items-center space-x-2">
                        <span class="relative text-sm text-gray-500 hover:text-primary transition-colors"></span>
                        <button id="logoutBtn"
                            class="relative text-sm text-gray-500 hover:text-primary transition-colors">退出</button>
                    </div>

                    <!-- 移动端菜单按钮 -->
                    <button id="mobileMenuBtn" class="md:hidden p-2 hover:text-primary transition-colors">
                        <i class="fa fa-bars text-xl"></i>
                    </button>
                </div>
            </div>

            <!-- 移动端搜索框 -->
            <div class="md:hidden pb-4">
                <div class="relative">
                    <input type="text" id="mobileSearchInput" placeholder="搜索商品..."
                        class="w-full py-2 px-4 pr-10 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-all">
                    <button id="mobileSearchBtn"
                        class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-primary transition-colors">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="pt-16">
        <!-- 产品头部 -->
        <section class="bg-gradient-to-r from-primary/90 to-primary text-white overflow-hidden">
            <div class="container mx-auto px-4 py-16 md:py-24">
                <div class="flex flex-col md:flex-row items-center">
                    <div class="md:w-1/2 mb-8 md:mb-0 relative z-10 slide-in">
                        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 leading-tight">
                            智能探索无人机
                        </h1>
                        <p class="text-lg md:text-xl mb-8 text-white/180 max-w-lg text-balance">
                            搭载先进AI技术，自主路径规划，智能避障。
                        </p>
                        <div class="flex flex-col sm:flex-row gap-4">
                            <button class="btn-secondary hover:shadow-lg transform hover:-translate-y-0.5 transition-all" onclick="window.location.href='index.html'">
                                技术参数
                            </button>
                            <button class="bg-white text-primary px-4 py-2 rounded-md hover:bg-gray-100 transition-all hover:shadow-md">
                                联系我们
                            </button>
                        </div>
                    </div>
                    <div class="md:w-1/2 relative">
                        <div class="absolute -right-10 -top-10 w-40 h-40 bg-white/10 rounded-full blur-3xl"></div>
                        <div class="absolute -left-10 -bottom-10 w-40 h-40 bg-accent/20 rounded-full blur-3xl"></div>
                        <img src="https://picsum.photos/600/400" alt="无人机智能探索系统" class="w-full h-auto rounded-lg shadow-lg hover:shadow-xl transition-shadow">
                    </div>
                </div>
            </div>
        </section>

        <!-- 产品特性 -->
        <section class="py-16 bg-white">
            <div class="container mx-auto px-4">
                <div class="text-center mb-12">
                    <h2 class="text-3xl md:text-4xl font-bold mb-4">产品特性</h2>
                    <p class="text-gray-600 max-w-2xl mx-auto">蓝猫探索系统融合了先进的人工智能技术和无人机控制技术，为您提供全方位的未知空间探索解决方案</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <div class="feature-card slide-in" style="animation-delay: 0.1s">
                        <div class="w-12 h-12 bg-primary/10 text-primary rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-map-o text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">自主路径规划</h3>
                        <p class="text-gray-600">基于先进的SLAM技术，能够实时构建环境地图并规划最优路径，避开障碍物。</p>
                    </div>

                    <div class="feature-card slide-in" style="animation-delay: 0.2s">
                        <div class="w-12 h-12 bg-primary/10 text-primary rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-wifi text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">远程实时监控</h3>
                        <p class="text-gray-600">通过高清摄像头和稳定的传输技术，可实时查看探索区域画面，远程操控设备。</p>
                    </div>

                    <div class="feature-card slide-in" style="animation-delay: 0.3s">
                        <div class="w-12 h-12 bg-primary/10 text-primary rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-battery-full text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">超长续航能力</h3>
                        <p class="text-gray-600">采用高效能源管理系统和大容量电池，单次充电可支持8小时持续工作。</p>
                    </div>

                    <div class="feature-card slide-in" style="animation-delay: 0.4s">
                        <div class="w-12 h-12 bg-primary/10 text-primary rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-shield text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">智能避障系统</h3>
                        <p class="text-gray-600">多传感器融合技术，360度无死角环境感知，提前规避各种障碍物。</p>
                    </div>

                    <div class="feature-card slide-in" style="animation-delay: 0.5s">
                        <div class="w-12 h-12 bg-primary/10 text-primary rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-cloud-upload text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">云端数据同步</h3>
                        <p class="text-gray-600">自动将探索数据上传至云端，支持多设备访问和数据分析，生成详细报告。</p>
                    </div>

                    <div class="feature-card slide-in" style="animation-delay: 0.6s">
                        <div class="w-12 h-12 bg-primary/10 text-primary rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-cogs text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold mb-2">模块化设计</h3>
                        <p class="text-gray-600">支持多种任务模块切换，可根据不同场景需求更换传感器和执行机构。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 产品规格 -->
        <section class="py-16 bg-light">
            <div class="container mx-auto px-4">
                <div class="text-center mb-12">
                    <h2 class="text-3xl md:text-4xl font-bold mb-4">产品规格</h2>
                    <p class="text-gray-600 max-w-2xl mx-auto">精确的参数配置，满足不同场景下的探索需求</p>
                </div>

                <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                    <div class="overflow-x-auto">
                        <table class="w-full">
                            <thead>
                                <tr class="bg-gray-50 border-b">
                                    <th class="py-4 px-6 text-left text-sm font-medium text-gray-500">参数</th>
                                    <th class="py-4 px-6 text-left text-sm font-medium text-gray-500">蓝猫探索标准版</th>
                                    <th class="py-4 px-6 text-left text-sm font-medium text-gray-500">蓝猫探索专业版</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="border-b hover:bg-gray-50">
                                    <td class="py-4 px-6 text-sm text-gray-700">尺寸</td>
                                    <td class="py-4 px-6 text-sm">350 x 350 x 120 mm</td>
                                    <td class="py-4 px-6 text-sm">420 x 420 x 140 mm</td>
                                </tr>
                                <tr class="border-b hover:bg-gray-50">
                                    <td class="py-4 px-6 text-sm text-gray-700">重量</td>
                                    <td class="py-4 px-6 text-sm">1.2 kg</td>
                                    <td class="py-4 px-6 text-sm">1.8 kg</td>
                                </tr>
                                <tr class="border-b hover:bg-gray-50">
                                    <td class="py-4 px-6 text-sm text-gray-700">续航时间</td>
                                    <td class="py-4 px-6 text-sm">8小时</td>
                                    <td class="py-4 px-6 text-sm">12小时</td>
                                </tr>
                                <tr class="border-b hover:bg-gray-50">
                                    <td class="py-4 px-6 text-sm text-gray-700">最大控制距离</td>
                                    <td class="py-4 px-6 text-sm">5 km</td>
                                    <td class="py-4 px-6 text-sm">10 km</td>
                                </tr>
                                <tr class="border-b hover:bg-gray-50">
                                    <td class="py-4 px-6 text-sm text-gray-700">摄像头分辨率</td>
                                    <td class="py-4 px-6 text-sm">4K</td>
                                    <td class="py-4 px-6 text-sm">8K</td>
                                </tr>
                                <tr class="border-b hover:bg-gray-50">
                                    <td class="py-4 px-6 text-sm text-gray-700">传感器</td>
                                    <td class="py-4 px-6 text-sm">激光雷达、超声波</td>
                                    <td class="py-4 px-6 text-sm">激光雷达、超声波、红外</td>
                                </tr>
                                <tr class="hover:bg-gray-50">
                                    <td class="py-4 px-6 text-sm text-gray-700">价格</td>
                                    <td class="py-4 px-6 text-sm font-bold text-primary">¥9,999</td>
                                    <td class="py-4 px-6 text-sm font-bold text-primary">¥15,999</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>

        <!-- 应用场景 -->
        <section class="py-16 bg-white">
            <div class="container mx-auto px-4">
                <div class="text-center mb-12">
                    <h2 class="text-3xl md:text-4xl font-bold mb-4">应用场景</h2>
                    <p class="text-gray-600 max-w-2xl mx-auto">蓝猫探索系统广泛应用于各种复杂环境和特殊场景</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div class="relative rounded-lg overflow-hidden group">
                        <img src="https://picsum.photos/600/400?random=1" alt="灾后救援" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-105">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
                            <div class="p-6 text-white">
                                <h3 class="text-xl font-bold mb-2">灾后救援</h3>
                                <p>进入人类难以到达的废墟区域，搜索幸存者并评估环境安全性</p>
                            </div>
                        </div>
                    </div>

                    <div class="relative rounded-lg overflow-hidden group">
                        <img src="https://picsum.photos/600/400?random=2" alt="矿山勘探" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-105">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
                            <div class="p-6 text-white">
                                <h3 class="text-xl font-bold mb-2">矿山勘探</h3>
                                <p>对矿山内部结构进行三维建模，检测潜在危险，提高开采安全性</p>
                            </div>
                        </div>
                    </div>

                    <div class="relative rounded-lg overflow-hidden group">
                        <img src="https://picsum.photos/600/400?random=3" alt="古建筑巡检" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-105">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
                            <div class="p-6 text-white">
                                <h3 class="text-xl font-bold mb-2">古建筑巡检</h3>
                                <p>对古建筑进行无损检测，检查结构完整性，辅助文物保护工作</p>
                            </div>
                        </div>
                    </div>

                    <div class="relative rounded-lg overflow-hidden group">
                        <img src="https://picsum.photos/600/400?random=4" alt="环境监测" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-105">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex items-end">
                            <div class="p-6 text-white">
                                <h3 class="text-xl font-bold mb-2">环境监测</h3>
                                <p>对森林、海洋等自然环境进行监测，收集生态数据，预警自然灾害</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white pt-12 pb-8 mt-8 lg:mt-16">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <span class="font-bold text-xl">蓝猫</span>
                    </div>
                    <p class="text-gray-400 mb-4">
                        提供优质商品和极简购物体验
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-primary transition-colors">
                            <i class="fa fa-weixin"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="font-bold text-lg mb-4">快速链接</h3>
                    <ul class="space-y-2">
                        <li><a href="index.html" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">热门商品</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="font-bold text-lg mb-4">客户服务</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">购物指南</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">配送信息</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="font-bold text-lg mb-4">联系我们</h3>
                    <ul class="space-y-2">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker text-primary mt-1 mr-3"></i>
                            <span class="text-gray-400">北京市朝阳区某某街道123号</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone text-primary mr-3"></i>
                            <span class="text-gray-400">400-123-4567</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope text-primary mr-3"></i>
                            <span class="text-gray-400">service@example.com</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="border-t border-gray-800 pt-6 text-center text-gray-500 text-sm">
                <p>&copy; 2023 蓝猫购物. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- 遮罩层 -->
    <div id="overlay" class="fixed inset-0 bg-black/50 opacity-0 transition-opacity duration-300 z-40 hidden"></div>

    <!-- 通知提示 -->
    <div id="toast" class="fixed bottom-6 right-6 bg-dark text-white px-4 py-3 rounded-lg shadow-lg transform translate-y-20 opacity-0 transition-all duration-300 z-50 flex items-center">
        <i class="fa fa-check-circle text-secondary mr-2"></i>
        <span id="toastMessage"></span>
    </div>
    <!-- 在product-intro.html的末尾，</body>之前 -->
    <script src="app.js"></script>
    <script>
        // 页面初始化（覆盖原有的重复初始化逻辑）
        document.addEventListener('DOMContentLoaded', () => {
            setupEventListeners(); // 使用app.js中的事件监听设置
            checkAuth().then(() => {
                loadCart(); // 使用app.js中的购物车加载逻辑
            });
        });
    </script>
</body>
</html>